<template>
  <mavon-editor @imgAdd="imgAdd" class="me-editor" ref="md" v-bind="editor" v-model="editor.value"></mavon-editor>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

import { upload } from '@/api/upload'

export default {
  props: {
    editor: Object
  },
  data () {
    return {}
  },
  components: {
    mavonEditor
  },
  mounted () {
    this.$set(this.editor, 'ref', this.$refs.md)
  },
  methods: {
    imgAdd (pos, $file) {
      let that = this
      let formdata = new FormData()
      formdata.append('image', $file)

      upload(formdata).then(data => {
        // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
        if (data.code === 0) {
          that.$refs.md.$img2Url(pos, data.data.url)
        } else {
          that.$message({ message: data.msg, type: 'error', showClose: true })
        }
      }).catch(err => {
        that.$message({ message: err, type: 'error', showClose: true })
      })
    }
  }
}
</script>
<style>
.me-editor {
  z-index: 6 !important;
}
.v-note-wrapper.fullscreen {
  margin-top: 55px !important;
}
</style>
